
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">

</head>
<body>
<h1>专辑音频管理</h1>
<!--添加表格表单-->
<form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 5px 30px 0px 0px" enctype="multipart/form-data">
    <div class="layui-form-item">
        <label class="layui-form-label">文章名</label>
        <div class="layui-input-block">
            <input type="text" name="articleName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传文章图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea name="articleContent" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上师ID</label>
        <div class="layui-input-block">
            <input type="text" name="guruId" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传时间</label>
        <div class="layui-input-block">
            <input type="text" name="articleDate" id="test1"  class="layui-input" >
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<!--修改表格表单  start ---------->
`   <form class="layui-form" id="updateForm" lay-Filter="updateFormFilter" style="display: none;padding: 5px 20px 0px  0px">

    <div class="layui-form-item">
        <label class="layui-form-label">文章名</label>
        <div class="layui-input-block">
            <input type="hidden" name="articleId" >
            <input type="text" name="articleName" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传文章图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload2">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea name="articleContent" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上师ID</label>
        <div class="layui-input-block">
            <input type="text" name="guruId" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传时间</label>
        <div class="layui-input-block">
            <input type="text" name="articleDate" id="test2"  class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!----------修改表格表单  end  --------->


<div>
    <button id="deleteAll" class="layui-btn">删除选中</button>
    <button id="add" class="layui-btn">添加</button>
</div>

<table  id="demo" lay-filter="tableFilter"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>


<script src="${pageContext.request.contextPath}/layui/layui.js"></script>

<script type="text/html" id="img">
    <img src="${pageContext.request.contextPath}{{d.guruImage}}" width="50px" hidden="50px" />
</script>
<script >
    layui.use(['table','form','laydate','upload','layer','jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var  layer=layui.layer;
        var  upload=layui.upload;
        var $ =layui.jquery;
        //日期组件
        laydate.render({
            elem:"#test1"
        })

        laydate.render({
            elem:"#test2"
        })
        //表格动态展示
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '${pageContext.request.contextPath}/album/selectAll' //数据接口
            ,page: true //开启分页
            ,limit:3
            ,limits:[3,6,9]
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'}
                ,{field: 'albumId', title: '专辑编号', width:100, sort: true}
                ,{field: 'albumName', title: '专辑名', width:100}
                ,{field: 'albumAuthor', title: '专辑作者', width:100}
                ,{field: 'albumTeller', title: '播音', width:100}
                ,{field: 'albumEpisodes', title: '集数', width:100}
                ,{field: 'albumDate', title: '时间', width:100}
                ,{field: 'albumContent', title: '简介', width:300}
                ,{field: 'albumImage', title: '封面图片', width:100,templet:"#img"}
                ,{field: 'albumStar', title: '星级', width:100}
                ,{field: 'cmfzAudios', title: '专辑音频', width:100}
                ,{title:'操作',toolbar:'#barDemo'}


            ]]
        });

        $("#add").click(function () {
            layer.open({
                type:1
                ,title:'添加页面'
                ,content:$("#addForm")
            })
        })
        //-----添加功能  start------

        //文件上传 start-----
        upload.render({
            elem: '#upload1' //绑定元素
            // ,auto:false //auto:false,禁止自动上传,默认自动上传
            // ,bindAction:'#btn1'
            ,url: '${pageContext.request.contextPath}/article/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                form.val('addFormFilter',{
                    articleImage:res.newName
                })
            }
            ,error: function(){
                //请求异常回调
                console.log("上传异常")
            }
        });
        //-----文件上传   end  -----


        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:'${pageContext.request.contextPath}/article/insert'
                ,data:$("#addForm").serialize()
                ,success:function(result){
                    if(result.flag){
                        layer.closeAll();//关闭添加界面的弹出层
                        $("#addForm")[0].reset();//使用js中的reset方法清空表单中的数据
                        layer.msg("添加成功!!!!");
                        table.reload("demo")//重载表格
                    }else{
                        layer.msg("添加异常!!!!")
                    }
                }
            })
            return false;
        });
        //------添加功能end-----

        //文件上传 start-----
        upload.render({
            elem: '#upload2' //绑定元素
            // ,auto:false //auto:false,禁止自动上传,默认自动上传
            // ,bindAction:'#btn1'
            ,url: '${pageContext.request.contextPath}/article/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                form.val('updateFormFilter',{
                    bannerImageUrl:res.newName
                })
            }
            ,error: function(){
                //请求异常回调
                console.log("上传异常")
            }
        });
        //-----文件上传   end  -----

        //table事件监听器  控制监听  编辑和删除
        table.on('tool(tableFilter)',function (obj) {
            var data=obj.data;

            console.log(data)
            if (obj.event=='edit'){
                layer.open({
                    type:1
                    ,title:'修改页面'
                    ,content:$("#updateForm")

                })

                $.ajax({
                    url:'${pageContext.request.contextPath}/article/selectOne'
                    ,data:'id='+obj.data.articleId
                    ,dataType:'json'
                    ,success:function (result) {

                        form.val('updateFormFilter',result)
                    }
                })
            }else if(obj.event=='del'){
                layer.confirm('确定要删除吗,亲!',function (index) {
                    $.ajax({
                        url:'${pageContext.request.contextPath}/article/delete'
                        ,data:'id='+obj.data.articleId
                        ,dataType:'json'
                        ,success:function (result) {
                            if(result.flag){
                                layer.msg('删除成功');
                                table.reload('demo');
                            }
                        }
                    })
                    layer.close(index);
                })

            }
        });
        //---修改功能  start------
        form.on('submit(update)', function(data){
            layer.msg(JSON.stringify(data.field));
            $.ajax({
                url:'${pageContext.request.contextPath}/article/update'
                ,data:$("#updateForm").serialize()
                ,dataType:'json'
                ,success:function(result){
                    if(result.flag){

                        //隐藏修改弹出层
                        layer.closeAll();
                        //提示修改层
                        layer.msg("修改成功!!!!");
                        //表格重载
                        table.reload("demo")
                    }
                }
            })
            return false;
        });
        //    ------修改功能结束--------

    });
</script>
</body>
</html>
